<template>
  <section id="author">
    <el-card class="" shadow="never">
      <div slot="header">
        <span class="has-text-weight-bold">👨‍💻 关于作者</span>
      </div>
      <div class="has-text-centered">
        <p class="is-size-5 mb-5">
          <router-link :to="{ path: `/member/${user.username}/home` }">
            {{ user.alias }} <span class="is-size-7 has-text-grey">{{ '@' + user.username }}</span>
          </router-link>
        </p>
        <div class="columns is-mobile">
          <div class="column is-half">
            <code>{{ user.topicCount }}</code>
            <p>文章</p>
          </div>
          <div class="column is-half">
            <code>{{ user.followerCount }}</code>
            <p>粉丝</p>
          </div>
        </div>
        <div>
          <button v-if="hasFollow" class="button is-success button-center is-fullwidth"
                  @click="handleUnFollow(user.id)">
            已关注
          </button>
          <button v-else class="button is-primary button-center is-fullwidth" @click="handleFollow(user.id)">
            关注
          </button>
          <button class="button is-link is-outlined is-fullwidth mt-4" @click="$refs.MessageDialog.show()">
            私信
          </button>
        </div>
          <MessageDialog ref="MessageDialog" :authorName="user.username" :sender="this.$store.state.user.user.username"
                         @closed="clearForm"
                         @sent="handleSendMessage"/>
      </div>
    </el-card>
  </section>
</template>

<script>
import MessageDialog from "@/components/Message/MessageDialog.vue";
import {follow, hasFollow, unFollow} from '@/api/follow'
import { mapGetters } from 'vuex'

export default {
  name: "Author",
  components: {
    MessageDialog
  },
  props: {
    user: {
      type: Object,
      default: null,
    }
  },
  data() {
    return {
      hasFollow: false,
      showMessageDialog: false,
    }
  },
  mounted() {
    this.fetchInfo()
  },
  computed: {
    ...mapGetters([
      'token'
    ])
  },
  methods: {
    fetchInfo() {
      if (this.token != null && this.token !== '') {
        hasFollow(this.user.id).then(value => {
          const {data} = value
          this.hasFollow = data.hasFollow
        })
      }
    },
    handleFollow(id) {
      if (this.token != null && this.token !== '') {
        follow(id).then(response => {
          const {message} = response
          this.$message.success(message)
          this.hasFollow = !this.hasFollow
          this.user.followerCount = parseInt(this.user.followerCount) + 1
        })
      } else {
        this.$message.warning('请先登录')
      }
    },
    handleUnFollow(id) {
      unFollow(id).then(response => {
        const {message} = response
        this.$message.success(message)
        this.hasFollow = !this.hasFollow
        this.user.followerCount = parseInt(this.user.followerCount) - 1
        this.showMessageDialog = false
      })
    },
    handleSendMessage(message) {
      this.showMessageDialog = false
      this.$refs.MessageDialog.clearForm();
      this.$message.success(message)
    },
    clearForm() {
      this.showMessageDialog = false
      this.$refs.MessageDialog.clearForm();
      this.$router.go(0)
    }
  }
};
</script>

<style scoped></style>